<template>
	<div ref="technologyTrendChart" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>

    import * as echarts from 'echarts';
    import { color, borderColor, legendTextStyle } from './chart-conf';
    import { formatMonthDate } from '../../../../utils/jk/jk-tool';
    import domResize from '../../../../mixins/dom-resize';
    export default {
        name: 'TechnologyItemTrendChart',
        props: {
            chartData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [domResize],
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'none'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '40px',
                        right: '10px',
                        bottom: '0px',
                        left: '20px',
                        containLabel: true
                    },
                    legend: {
                        data: ['产量(kg)'],
                        textStyle: {
                            color: legendTextStyle
                        }
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'],
                        data: [],
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    color: 'none'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: color

                            },
                            axisLine: {
                                lineStyle: {
                                    color: borderColor
                                }
                            }
                        },
                        {
                            type: 'value',
                            splitLine: {
                                lineStyle: {
                                    color: 'none'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: color

                            },
                            axisLine: {
                                lineStyle: {
                                    color: borderColor
                                }
                            }
                        }
                    ],
                    visualMap: [
                        {
                            type: 'piecewise',
                            top: 0,
                            right: 0,
                            show: false,
                            precision: 1,
                            seriesIndex: 0,
                            pieces: [
                                {
                                    gt: 10, // 设置最小值
                                    lte: 20, // 设置最大值
                                    color: 'rgba(31,134,253,1)'
                                }
                            ],
                            outOfRange: {
                                color: '#ed4014' // 设置超出部分的颜色
                            }
                        }
                    ],
                    series: [
                        {
                            name: '能耗(kw·h)',
                            type: 'line',
                            // data: [142, 112, 233, 214, 205, 196, 204],
                            data: [],
                            smooth: false,
                            barGap: 0,
                            symbol: 'none',
                            itemStyle: {
                                color: '#2378f7'
                            },
                            /* markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            },*/
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.technologyTrendChart);
                    this.updateChart();
                });
            },
            getTime(e) {
                const d = new Date(e);
                const h = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
                const m = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
                const s = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
                return `${h}:${m}:${s}`;
            },
            updateChart() {
                this.option.series[0].name = this.chartData.typeName;
                this.option.legend.data = [this.chartData.typeName];
                if (this.example) {
                    this.$nextTick(() => {
                        const cpData = this.chartData ? JSON.parse(JSON.stringify(this.chartData)) : { machineDataList: [] };
                        cpData.machineDataList = cpData.machineDataList || [];
                        this.option.xAxis.data = cpData.machineDataList.map(x => this.getTime(x.createTime));
                        this.option.series[0].data = cpData.machineDataList.map(x => x.value);
                        this.option.series[0].name = cpData.typeName;
                        this.option.visualMap[0].pieces[0].gt = cpData.minValue ? Number(cpData.minValue) : 0;
                        this.option.visualMap[0].pieces[0].lte = cpData.maxValue ? Number(cpData.maxValue) : 10; // 最大值不能小于最小值||0
                        this.option.legend.data = [this.chartData.typeName];
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            }
        },
        mounted() {
            this.resize();
            this.initChart();
        },
        watch: {
            chartData: {
                handler() {
                    this.updateChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
